<template>
    <div class="employee-table-list">
        <el-table
                ref="employeeTable"
                :data="tableData"
                :height="tableHeight"
                border
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange"
                :default-sort="defaultSort">
            <el-table-column
                    type="selection"
                    show-overflow-tooltip
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="number"
                    label="编号"
                    width="95"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="95"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="department"
                    label="部门"
                    width="95"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="workNo"
                    label="员工工号"
                    width="125"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="workPhone"
                    label="工作电话"
                    width="125"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="手机号码"
                    width="125"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="createDate"
                    label="创建日期"
                    width="125"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="95"
                    :filters="statusFilter"
                    :filter-method="filterStatus"
                    filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'" close-transition>
                        {{scope.row.status}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="packageStatus"
                    label="分包状态"
                    width="125"
                    :filters="packageStatusFilter"
                    :filter-method="filterPackageStatus"
                    filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.packageStatus === '已分配' ? 'primary' : 'info'" close-transition>
                        {{scope.row.packageStatus}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                    <el-button size="mini" type="primary" @click="handleLook(scope.$index, scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "TableInfoList",
        props: {
            tableHeight: {
                required: false,
                type: String,
                default: () => {
                    return "550";
                }
            },
            defaultSort: {
                required: false,
                type: Object,
                default: () => {
                    return {prop: 'number', order: 'descending'};
                }
            }
        },
        computed: {
            statusFilter() {
                return [{text: '正常', value: '正常'}, {text: '异常', value: '异常'}];
            },
            packageStatusFilter() {
                return [{text: '已分配', value: '已分配'}, {text: '未分配', value: '未分配'}]
            }
        },
        data() {
            return {
                multipleSelection: [],
                tableData: [{
                    number: '10021',
                    name: '王小虎',
                    department: '业务部',
                    workNo: '446',
                    workPhone: '18971335211',
                    phone: '15972060520',
                    createDate: '2016-05-03',
                    status: '正常',
                    packageStatus: '已分配',
                }, {
                    number: '10021',
                    name: '王小虎',
                    department: '业务部',
                    workNo: '446',
                    workPhone: '18971335211',
                    phone: '15972060520',
                    createDate: '2016-05-03',
                    status: '异常',
                    packageStatus: '未分配',
                }, {
                    number: '10021',
                    name: '王小虎',
                    department: '业务部',
                    workNo: '446',
                    workPhone: '18971335211',
                    phone: '15972060520',
                    createDate: '2016-05-03',
                    status: '正常',
                    packageStatus: '已分配',
                }, {
                    number: '10021',
                    name: '王小虎',
                    department: '业务部',
                    workNo: '446',
                    workPhone: '18971335211',
                    phone: '15972060520',
                    createDate: '2016-05-03',
                    status: '正常',
                    packageStatus: '已分配',
                }, {
                    number: '10021',
                    name: '王小虎',
                    department: '业务部',
                    workNo: '446',
                    workPhone: '18971335211',
                    phone: '15972060520',
                    createDate: '2016-05-03',
                    status: '正常',
                    packageStatus: '已分配',
                }, {
                    number: '10021',
                    name: '王小虎',
                    department: '业务部',
                    workNo: '446',
                    workPhone: '18971335211',
                    phone: '15972060520',
                    createDate: '2016-05-03',
                    status: '正常',
                    packageStatus: '已分配',
                }, {
                    number: '10021',
                    name: '王小虎',
                    department: '业务部',
                    workNo: '446',
                    workPhone: '18971335211',
                    phone: '15972060520',
                    createDate: '2016-05-03',
                    status: '正常',
                    packageStatus: '已分配',
                }, {
                    number: '10021',
                    name: '王小虎',
                    department: '业务部',
                    workNo: '446',
                    workPhone: '18971335211',
                    phone: '15972060520',
                    createDate: '2016-05-03',
                    status: '正常',
                    packageStatus: '已分配',
                }, {
                    number: '10021',
                    name: '王小虎',
                    department: '业务部',
                    workNo: '446',
                    workPhone: '18971335211',
                    phone: '15972060520',
                    createDate: '2016-05-03',
                    status: '正常',
                    packageStatus: '已分配',
                }, {
                    number: '10021',
                    name: '王小虎',
                    department: '业务部',
                    workNo: '446',
                    workPhone: '18971335211',
                    phone: '15972060520',
                    createDate: '2016-05-03',
                    status: '正常',
                    packageStatus: '已分配',
                }],
            }
        },
        methods: {
            /**
             * 编辑
             * @param index
             * @param row
             */
            handleEdit(index, row) {
                console.log(index, row);
                this.$parent.$parent.curPath = `edit@${row.workNo}`;
            },
            /**
             * 删除
             * @param index
             * @param row
             */
            handleDelete(index, row) {
                console.log(index, row);
            },
            /**
             * 查看
             * @param index
             * @param row
             */
            handleLook(index, row) {
                console.log(index, row);
                this.$parent.$parent.curPath = `look@${row.workNo}`;
            },
            /**
             * 状态过滤
             * @param value
             * @param row
             * @returns {boolean}
             */
            filterStatus(value, row) {
                return row.status === value;
            },
            /**
             * 分包状态过滤
             * @param value
             * @param row
             * @returns {boolean}
             */
            filterPackageStatus(value, row) {
                return row.packageStatus === value;
            },
            /**
             * 行背景色处理
             * @param row
             * @param rowIndex
             * @returns {string}
             */
            tableRowClassName({row, rowIndex}) {
                if (row.status === '异常') {
                    return 'danger-row';
                } else if (row.status === '正常' && row.packageStatus === '已分配') {
                    return 'success-row';
                }
                return '';
            },
            /**
             * 选中行处理
             * @param val
             */
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        }
    }
</script>

<style lang="scss">
    .employee-table-list {

    }
</style>